<template>
  <div>
  场馆设置
  <el-button @click="showAdd=true">添加场馆</el-button>
  <!-- 弹框添加 -->
  <el-dialog  v-model="showAdd"   width="60%" title="编辑/添加场馆" :destroy-on-close="true">
  <div class="body">
    <div class="form">
      {{ JSON.stringify(address) }}
    </div>
    <div class="map">
      <baidu-map class="bm-view" :center="center" :zoom="12" :scroll-wheel-zoom="true" @ready="ready" @click="mapClick" >
        <bm-marker :position="point"   animation="BMAP_ANIMATION_BOUNCE" :dragging="true" @dragend="mapClick">
       </bm-marker>
      </baidu-map>
    </div>
  </div>
    
  </el-dialog>
  <!-- 弹框ed -->
  </div>
</template>
<script setup>

import {ref} from 'vue'
// 是否显示添加
const showAdd = ref(false);
// 存储中心
const center = ref({lng: 116.404, lat: 39.915})
const point = ref({lng: 116.404, lat: 39.915})
const BMapGL = ref();
const  address = ref({});
// 地图准备完毕
const ready = ({BMap,map})=>{
  BMapGL.value = BMap;
  // 获取当前城市
  function myFun(result){
        var cityName = result.name;      
        // 获取城市对应经度和纬度
        var myGeo = new BMap.Geocoder();
        myGeo.getPoint(cityName, function(p){
          // p就是经度与纬度
         map.centerAndZoom(p,11)
        // 把小点移动到 p位置
        point.value = p;  
            
        }  )
    }
  var myCity = new BMap.LocalCity();
  myCity.get(myFun); 

}
// 地图添加一个单击事件,获取点击的位置
const mapClick = e=>{
  // 红点的位置为点击的位置
  point.value.lng = e.point.lng;
  point.value.lat = e.point.lat;
  // 根据点的位置 解析当前的地址
  var myGeo = new BMapGL.value.Geocoder();      
  // 根据坐标得到地址描述    
  myGeo.getLocation(point.value, function(result){      
      if (result){      
        // console.log(result)
        // alert(result.address);    
        result.addressComponents.address = result.address; 
        address.value = result.addressComponents;
      }      
  });

}

</script>
<style lang="scss" scoped>
.body{
  padding: 10px;
  display: flex;
  .form{flex:1}
  .map{flex:1}
  .bm-view{
    width: 100%;
    height: 600px;
  
  }
}
</style>